<template>
  <div class="record">
    <el-dropdown trigger="click">
       <span class="el-dropdown-link">
              阅读记录<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item v-show="empty">
               <el-empty></el-empty>
             </el-dropdown-item>
             <el-dropdown-item  v-show="!empty">
               <el-scrollbar height="300px">
                 <read-book-info v-for="record in records" :bookInfo="record"></read-book-info>
               </el-scrollbar>
             </el-dropdown-item>
             
           </el-dropdown-menu>
       </template>
     </el-dropdown>
  </div>
</template>

<script lang="ts">
import { ref, onMounted, defineComponent } from "vue";
import { useRouter, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "vuex"
import ReadRecordModule from "@c/book/ReadRecordModule.vue"

export default defineComponent({
  components: {
    ReadBookInfo: ReadRecordModule
  },
  setup() {
    
    const router = useRouter()
    const store = useStore()
    
    const recordClick = () => {
      router.push("/bookshelf")
    }
    
    const empty: boolean = ref(true)
    const records: Array<Object> = ref([])
    
    /**
     * 将时间转换为 多久以前
     * 例如 updated 为 2021年 5月 17 日 11 点 00 分
     * 现在时间是 2021 年 5 月 17 日 11 点 01 分
     * 就会 将 updated 转换为 1 分前
     */
    const transUpdatedTimeToBefore = (updated: string) => {
      let updatedDate = new Date(updated)
      let minus = new Date() - updatedDate;
      let year = Math.floor(minus / ( 1000 * 60 * 60 * 24 * 365 ));
      if ( year > 0) {
        return year + "年以前";
      }
      let month = Math.floor(minus / ( 1000 * 60 * 60 * 24 * 30));
      if( month > 0) {
        return month + "月以前";
      }
      let day = Math.floor(minus / ( 1000 * 60 * 60 * 24));
      if(day > 0) {
        return day + "天以前";
      }
      let hour = Math.floor(minus / ( 1000 * 60 * 60 ));
      if(hour > 0) {
        return hour + "小时以前";
      }
      let minute = Math.floor(minus / ( 1000 * 60 ));
      if(minute > 0) {
        return minute + "分钟以前";
      }
      // return Math.floor(minus / 1000) + "秒以前";
      return "刚刚";
    }
    
    // 更新数据
    const updateData = () => {
      // 获取 localStorage 里数据
      // 等待一小段时间，为了给 ChapterMain 更新记录腾出时间
      setTimeout(300);
      let readRecord = store.getters.getReadRecord;
      // 存在
      if(readRecord) {
        // 赋值
        records.value = readRecord;
        // 遍历
        for ( let i = 0; i < records.value.length ; i++) {
          // 转换 时间 为 多久以前
          let updatedBefore = transUpdatedTimeToBefore(records.value[i].updated)
          // 赋值
          records.value[i].updated = updatedBefore
        }
        // 此时不为空
        empty.value = false
      }
    }
    
    onMounted(() => {
      updateData()
    })
    
    onBeforeRouteUpdate((to, from, next) => {
      updateData()
      next()
    })
    
    
    return {
      recordClick,
      empty,
      records,
    }
  }
})
</script>

<style scoped>
.record {
  position: absolute;
  right: 180px;
  top: 20px;
  cursor: pointer;
}
</style>
